@import '../../../assets/css/function.scss';
.singleNote{
    .head {
        overflow: hidden;
        height: px2rem(100px);
        background: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .back-img {
            display: flex;
            height: px2rem(100px);
            width: px2rem(110px);
            padding-left: px2rem(30px);
            align-items: center;
            img {
                width: 25%;
            }
        }
        .head-text {
            display: flex;
            align-items: center;
            font-size: px2rem(32px);
            color: #505050;
            .header-down {
                display: inline-block;
                margin-left: px2rem(10px);
                height: px2rem(30px);
                width: px2rem(30px);
                img {
                    width: 100%;
                }
            }
        }
        .snt-filter {
            height: px2rem(100px);
            margin-right: px2rem(30px);
            display: flex;
            align-items: center;
            font-size: px2rem(30px);
            color: #505050;
            .iconfont{
                margin-right: px2rem(20px);
            }
        }
    }
    .meng-cheng {
        z-index: 30;
        position: absolute;
        top: px2rem(100px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
    }
    /*top:px2rem(100px);*/
    .title-collspce {
        z-index: 31;
        position: absolute;
        width: 100%;
        height: px2rem(205px);
        border-top: 1px solid #9f9f9f;
        overflow: hidden;
        background: #f4f4f4;
        .btn-box {
            line-height: px2rem(50px);
            width: px2rem(200px);
            text-align: center;
            font-size: px2rem(26px);
            color: #505050;
            border: 1px solid #c7c7c7;
            position: relative;
            margin: 0 px2rem(23px);
            float: left;
            margin-top: px2rem(10px);
            .img-box {
                display: inline-block;
                height: px2rem(36px);
                width: px2rem(36px);
                position: absolute;
                bottom: -1px;
                right: -1px;
                img {
                    width: 100%;
                }
            }
        }
        .btn-box:nth-child(3n){
            margin-right: 0;
        }
        .cur {
            color: #ea5504 !important;
            border: 1px solid #ea5504 !important;
        }
    }
    .el-collapse{
        position: absolute;
        overflow: scroll;
        width: 100%;
        top: px2rem(172px);
        bottom:px2rem(88px);
        padding-top: px2rem(10px);
        z-index: 1;
    }
    .matchTitle{
        background: white;
        height: px2rem(72px);
        display: flex;
        align-items: center;
        padding-left: px2rem(22px);
        color: #9f9f9f;
        font-size: px2rem(26px);
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
    }
    .hotMatch,.icon-icon-23{
        color: #ea5504;
    }
    .icon-icon-23{
        font-size: px2rem(34px);
    }
    .spfList{
        color: #9f9f9f;
        font-size: px2rem(26px);
    }
    .hotMatchList{
        width: px2rem(686px);
        margin: 0 auto;
        li{
            border-top: 1px solid #f0f0f0;
            padding-top: px2rem(27px);
            padding-bottom: px2rem(27px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            .dan_icon{
                position: absolute;
                top: 0;
                left: px2rem(-32px);
                width: px2rem(56px);
            }
        }
        .matchLeft{
            position: relative;
            height: px2rem(114px);
            line-height: px2rem(32px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            font-size: px2rem(22px);
            color: #787878;
            p{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
            }
            span{
                img{
                    height: px2rem(22px);
                }
            }
        }
        .halt{
            position: absolute;
            background: rgba(0,0,0,.1);
            width: 80%;
            height: 1.41333rem;
            color: #000;
            font-size: px2rem(28px);
            z-index: 999;
            .halt_p{
                height: 0.2rem;
                margin: 0 auto;
                padding-top: 0.6em;
                font-style: normal;
                display: block;
                text-align: center;
            }
        }
        .fhBoxhalt{
            position: absolute;
            background: rgba(0,0,0,.1);
            width: 6.4rem;
            height: 0.74667rem;
            color: #000;
            font-size: px2rem(28px);
            z-index: 999;
            .halt_p{
                height: 0.2rem;
                margin: 0 auto;
                padding-top: 0.2em;
                font-style: normal;
                display: block;
                text-align: center;
            }
        }
        .haltBox{
            position: absolute;
            background: rgba(0,0,0,.1);
            width: 7.33333rem;
            height:1.9rem;
            color: #000;
            font-size: px2rem(28px);
            z-index: 999;
            .halt_p{
                height: 0.2rem;
                margin: 0 auto;
                padding-top: 1em;
                font-style: normal;
                display: block;
                text-align: center;
            }
        }

        .fhBoxhaltbf{
            position: absolute;
            background: rgba(0, 0, 0, 0.1);
            width: 7.33333rem;
            height: 0.74667rem;
            color: #000;
            font-size: 0.37333rem;
            z-index: 999;
            .halt_p{
                height: 0.2rem;
                margin: 0 auto;
                padding-top: 0.2em;
                font-style: normal;
                display: block;
                text-align: center;
            }
        }
        .haltBoxth{
            position: absolute;
            background: rgba(0,0,0,.1);
            width: 7.33333rem;
            height:1.8rem;
            color: #000;
            font-size: px2rem(28px);
            z-index: 999;
            .halt_p{
                height: 0.2rem;
                margin: 0 auto;
                padding-top: 1em;
                font-style: normal;
                display: block;
                text-align: center;
            }
        }
        .matchRight{
            .matchRightBox{
                position: relative;
                height: px2rem(106px);
                border: 1px solid #c7c7c7;
                box-sizing: border-box;
                display: flex;
                align-items: center;
            }
            p{
                height: px2rem(106px);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                width: px2rem(126px);
                background: url('../../../assets/img/freebuy_img/line3.png') no-repeat right center;
                background-size: 1px px2rem(74px); 
                position: relative;
                line-height: px2rem(38px);
                span:first-of-type{
                    font-size: px2rem(28px);
                    color: #505050;
                }
                span:last-of-type{
                    font-size: px2rem(24px);
                    color: #9f9f9f;
                }
                b{
                    position: absolute;
                    display: block;
                    width: 100%;
                    height: 100%;
                    z-index: 5;
                }
                i{
                    font-style: normal;
                    font-weight: 600;
                }
            }
            P:first-of-type,p:last-of-type{
                width: px2rem(210px);
            }
            p:last-of-type{
                background: none;
                border-right: none;
            }
            p:nth-child(2){
                span{
                    color: #9f9f9f;
                }
            }
        }
        .matchRightjqs,.matchRightbf{
            .jqs_title,.bf_title{
                display: flex;
                span{
                    font-size: px2rem(28px);
                    color: #505050;
                    flex: 1;
                    text-align: center;
                }
                span:nth-child(2){
                    color: #9f9f9f;
                }
            }
            .matchRightbfBox{
                position: relative;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                width: px2rem(480px);
                border: 1px solid #c7c7c7;
                height: px2rem(56px);
                font-size: px2rem(24px);
                color: #9f9f9f;
                text-align: center;
                line-height: px2rem(56px);
                box-sizing: border-box;
                margin-right: px2rem(30px);
            }
            .matchRightstoneBox{
                position: relative;
                width: px2rem(550px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                p{
                    border: 1px solid #c7c7c7;
                    height: px2rem(56px);
                    width: px2rem(250px);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    font-size: px2rem(26px);
                    color: #9f9f9f;
                    position: relative;
                    b{
                        position: absolute;
                        display: block;
                        width: 100%;
                        height: 100%;
                        z-index: 5;
                    }
                }
                .selected{
                    border: none;
                }
            }
            .matchRighthhBox{
                position: relative;
                width: px2rem(550px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: 1px solid #c7c7c7;
                box-sizing: border-box;
                .team_left{
                    flex: 6;
                    .team_top,.team_bottom{
                        display: flex;
                        align-items: center;
                        p{
                            flex: 3;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: px2rem(26px);
                            color: #999;
                            height: px2rem(66px);
                            background: url('../../../assets/img/freebuy_img/line3.png') no-repeat right center;
                            background-size: 1px px2rem(30px); 
                        }
                        P:last-of-type{
                            background: none;
                        }
                        p:first-of-type{
                            flex: 1;
                            background: #c7c7c7;
                            color: white;
                            font-size: px2rem(24px);
                        }
                        p:nth-child(4n){
                            border-right: none!important;
                        }
                    }
                    .team_top{
                        box-sizing: border-box;
                        border-bottom: 1px solid #c7c7c7;
                    }
                }
                .team_right{
                    height: px2rem(132px);
                    box-sizing: border-box;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction:column;
                    color: #999;
                    font-size: px2rem(26px);
                    border-left: 1px solid #c7c7c7;
                    span{
                        line-height: px2rem(35px);
                    }
                }
            }
            .matchRightBox{
                position: relative;
                box-sizing: border-box;
                overflow: hidden;
                border: 1px solid #c7c7c7;
                width: px2rem(550px);
                display: flex;
                flex-wrap: wrap; 
                border-bottom: 0;
                p{
                    background: url('../../../assets/img/freebuy_img/line3.png') no-repeat right center;
                    background-size: 1px px2rem(40px);
                    width: 25%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: 1px solid #c7c7c7;
                    box-sizing: border-box;
                    position: relative;
                    height: px2rem(72px);
                    span:first-of-type{
                        font-size: px2rem(28px);
                        color: #505050;
                    }
                    span:last-of-type{
                        font-size: px2rem(24px);
                        color: #9f9f9f;
                    }
                    b{
                        position: absolute;
                        display: block;
                        width: 100%;
                        height: 100%;
                        z-index: 5;
                    }
                }
                p:nth-child(4n){
                    background: none;
                    border-right: none!important;
                }
                
            }
        }
        .selected{
            background: #e85504!important;
            box-sizing: border-box;
            border-right: 1px solid #fff;
            color: #fff!important;
            span{
                color: #fff!important;
            }
            i{
                color: #fff!important;
            }
        }
        .selectedBf{
            background: #e85504!important;
            color: #fff!important;
            padding: 0 px2rem(30px);
            border: none!important;
        }
    }
    .signleSected{
        .team_bottom{
            .selected{
                margin-top: -2px;
                border-top: 1px solid #f0f0f0; 
                height: 0.93rem!important;
            }
        }
    }

    .match_footer{
        height: px2rem(88px);
        background: white;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        z-index: 20;
        .match_footer_left{
            flex: 6.8;
            display: flex;
            align-items: center;
            height: 100%;
            .match_delete{
                height: 100%;
                padding: 0 px2rem(28px);
                display: flex;
                align-items: center;
                .icon-icon-26{
                    color: #9f9f9f;
                    font-size: px2rem(40px);
                }
            }
            .match_test_status{
                height: px2rem(66px);
                font-size: px2rem(22px);
                color: #787878;
                border-left: 1px solid #f0f0f0;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                padding-left: px2rem(30px); 
            }
        }
        .confirm{
            height: 100%;
            flex: 3.2;
            background: #e85504;
            color: #fff;
            border: none;
            font-size: px2rem(32px);
        }
        .noConfirm{
            background: #ccc;
        }
    }
    .icon-icon-34{
        font-size: px2rem(32px);
        color: #ea5504;
    }
    .icon-icon-22{
        font-size: px2rem(24px);
    }

}